<template>
  <el-card>
    <template #header>
      <el-row justify="space-between" align="middle">
        <el-col :span="12" style="font-size: 35px;color: #3f87f8;text-align: left">场次列表</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" size="large" :icon="Plus" @click="handleAdd">创建</el-button>
        </el-col>
      </el-row>
    </template>
    <el-table
        :data="sessionList" stripe style="width: 100%" v-loading="loading">
      <el-table-column align="center" prop="movieSession.sessionId" label="编号" width="60"></el-table-column>
      <el-table-column align="center" prop="movieHall.hallName" label="影厅名"></el-table-column>
      <el-table-column align="center" prop="movie.movieName" label="电影名"></el-table-column>
      <el-table-column align="center" prop="movieSession.sessionPrice" label="价格"></el-table-column>
      <el-table-column align="center" prop="movieSession.startTime" label="开始时间"></el-table-column>
      <el-table-column align="center" prop="movieSession.endTime" label="结束时间"></el-table-column>
    </el-table>
    <el-pagination
        :hide-on-single-page="true"
        v-model:currentPage="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
  </el-card>
</template>

<script setup lang="ts">

import {onBeforeMount, ref} from "vue";
import api from "../../../api/api";
import {Plus} from '@element-plus/icons-vue'
import router from "../../../router";

const sessionList = ref()
const searchKey = ref('')
const pageInfo = ref({
  pageSize: 5,
  pageNum: 1,
  total: 0
})
const loading = ref(false)

onBeforeMount(() => [
  getSessionList()
])

const getSessionList = () => {
  loading.value = true
  api.movieSession.getSessionList({
    pageSize: pageInfo.value.pageSize,
    pageNum: pageInfo.value.pageNum,
    searchKey: searchKey.value
  }).then(res => {
    if (res.data.code == 0) {
      sessionList.value = res.data.data.list
      pageInfo.value.total = res.data.data.count
    }
    loading.value = false
  })
}

const handleAdd = () => {
  router.push('/addSession/0')
}

const handleSizeChange = (val: number) => {
  pageInfo.value.pageSize = val
  getSessionList()
}
const handleCurrentChange = (val: number) => {
  pageInfo.value.pageNum = val
  getSessionList()
}
</script>

<style scoped>

</style>